建立 React 專案

有很多方法可以建置 React 專案， 像是 使用 Script Tag 將 React 加入到網頁，或者是 使用 Webpack 建立 React應用程式。

前者使用 Script 的方式，缺點是較難維護程式碼（當引入函式庫一多就會有很多 ）且容易遇到版本相容性問題，不太適合開發大型應用程式。

使用 Webpack 做為專案的模組打包工具，才是 React 專案最好的建置方式，以下是可以透過 Wepback 設置完成的功能。

• 將 CSS、圖片與其他資源打包
• 打包之前預處理（Less、CoffeeScript、JSX、ES6 等）的檔案
• 依 entry 文件不同，把 .js 分拆為多個 .js 檔案
• 整合豐富的 loader 可以使用

但是要配置出 Webpack 的設定檔案，往往要耗費很多心力。

create-react-app (CRA)

使用命令列工具 create-react-app 則是開發 React 應用程式的常見起點。透過簡單的在 Terminal 輸入一行指令， 就能完成初始 React 專案的建置。使用它可以讓你花更少的時間在設置上，讓你更專注在應用程式的開發上。

CRA 讓你不用花太多心力配置 Webpack 的設定檔案，它是可以快速建立 React 專案的工具，然後在建立專案後就自動幫你將 Babel、Webpack 預先配置並封裝好了。

Create React App lets you focus on code, not build tools.

環境要求

使用 CRA 建立 React 專案前，首要先安裝 Node.js（建議使用長期支援-LTS 版本)。Node.js 可以使用二種套件管理工具 npm (Node.js 安裝完成就有npm) 及 yarn(npm install -g yarn)。

無論你是使用哪種套件管理工具，你都可以使用 npx 來做套件一次性的執行，npx 會下載完套件然後執行後再刪除該套件。很適合用在執行建立專案腳手架類型的套件。

根據 create-react-app官方指示，可以使用下列三種方式安裝

• npx：npx 來自npm 5.2+ 或更高版本

npx create-react-app my-app

• npm：npm init 在npm 6+ 中可用

npm init react-app my-app

• yarn：yarn create 在Yarn 0.25+ 中可用

yarn create react-app my-app

前人踩雷經驗分享

如果你在執行 npx create-react-app 之前，已經有安裝過 yarn，那這行指令安裝完成後，你會在專案結構中看到 package.json 及 yarn.lock 的檔案，表示 CRA 自動幫你偵測使用 yarn 這個套件做後續運行管理。

如果你同時擁有 npm 及 yarn，但你想要目前的所建立的專案，後續運行管理使用的是 npm 那為你就要指定使用 npm，語法如下

npx create-react-app my-app --use-npm

Next

CRA 幫我們封裝好 Webpack 設定，所以建立好的專案中不會看到 Webpack設定檔案，但是當我們需要使用 Webpack 做專案打包進階的調整時，我們要去哪裡做調整呢？就在下一篇要介紹的內容。

Reference

https://create-react-app.dev/

https://pjchender.dev/react/note-create-react-app/

https://snh90100.medium.com/%E5%9C%A8-create-react-app-%E4%B8%AD%E4%BF%AE%E6%94%B9-webpack-%E8%A8%AD%E5%AE%9A-%E4%BB%A5%E8%AA%BF%E6%95%B4-webpack-alias-%E7%82%BA%E4%BE%8B-59fd9eeeffe7

https://segmentfault.com/a/1190000039850941